import { Table, Switch, message } from 'antd';
import { useState, useEffect } from 'react';
import { GetEvaluate, deleteEvaluate, UpdateEvaluate } from '../../../Api/Api';
import './Evaluate.less';

export default function Evaluate() {
  const [dataList, setDataLsit] = useState([]);
  const [all, setAll] = useState(0);
  useEffect(() => {
    GetEvaluate({ page: 1, limit: 5 }).then((res) => {
      console.log(res, 123456);
      res.data.res.map((item) => {
        item.key = item.id;
      });
      setDataLsit(res.data.res);
      setAll(res.data.all);
    });
  }, []);

  const columns = [
    {
      title: '商品图片',
      dataIndex: 'goodsImg',
      key: 'goodsImg',
      render: (_: any, value: any) => {
        return (
          <img key={value.id} src={value.goodsImg} alt="" className="img" />
        );
      },
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: '评价内容',
      dataIndex: 'evaluationContent',
      key: 'evaluationContent',
    },
    {
      title: '评价图片',
      dataIndex: 'evaluationImg',
      key: 'evaluationImg',
      render: (_: any, value: any) => {
        const imgList = value.evaluationImg.split('#');
        return imgList.map((item: any, index) => {
          return <img key={index} src={item} alt="" className="img" />;
        });
      },
    },
    {
      title: '显示状态',
      dataIndex: 'status',
      key: 'status',
      render: (_: any, value: any) => {
        var defaultChecked;
        if (value.status == 1) {
          defaultChecked = true;
        } else {
          defaultChecked = false;
        }
        return (
          <Switch
            onClick={(e) => {
              handleClick(value, e);
            }}
            defaultChecked={defaultChecked}
            checkedChildren="开启"
            unCheckedChildren="关闭"
          />
        );
      },
    },
    {
      title: '操作',
      render: (_: any, value: any) => {
        return (
          <a
            onClick={() => {
              handleDel(value);
            }}
          >
            删除
          </a>
        );
      },
    },
  ];
  function handleDel(e: any) {
    console.log(e, 123);

    let arr = [];
    for (let index = 0; index < dataList.length; index++) {
      if (e.id !== dataList[index].id) {
        arr.push(dataList[index]);
      }
    }
    deleteEvaluate({ id: e.id }).then((res: any) => {
      console.log(res);
      setDataLsit(arr);
      message.success(res.msg);
    });
  }
  function handleClick(value: any, e) {
    console.log(value, e, 123);
    const id = value.id;
    let radio = e == true ? 1 : 0;
    UpdateEvaluate({ status: radio, id: id }).then((res: any) => {
      console.log(res);
      message.success(res.msg);
    });
  }

  const pagination = {
    total: all,
    pageSize: 5,
    defaultCurrent: 1,
    onChange: CheckChange,
  };

  function CheckChange(e) {
    console.log(e, 123);
    GetEvaluate({ page: e, limit: 5 }).then((res) => {
      console.log(res, 123456);
      res.data.res.map((item) => {
        item.key = item.id;
      });
      setDataLsit(res.data.res);
    });
  }
  return (
    <div>
      <Table
        dataSource={dataList}
        columns={columns}
        bordered
        pagination={pagination}
      />
    </div>
  );
}
